<!--
 作者：ex_wangshuai
 日期：2016-10-22
 功能：首页-掌天下-首次进入展示组件
 参数：
 事件：
-->

<template>
  <div class="industry">
    <toolbar :view-title="allTitle[viewIndex]">
      <div
        class="leftButton"
        type="button"
        slot="left-button"
        v-link='{path: "/industry/list"}'>&nbsp;
      </div>
      <div
        class="rightButton"
        type="button"
        slot='right-button'
        @click='doFilter'>筛选
      </div>
    </toolbar>
    <router-view>
    </router-view>
    <div class="btnPage">
      <span v-link="{path:'/industry/'+allId[viewIndex]}" class="btn-previous float-left" @click="btnPrevious"></span>
      <span v-link="{path:'/industry/'+allId[viewIndex]}" class="btn-next float-right" @click="btnNext"></span>
    </div>
  </div>
</template>

<script>
  import Toolbar from '../../common/Toolbar.vue'

  export default{
    data () {
      var data = {}
      data.viewIndex = 0
      data.tabList = []
      data.contentList = []
      data.allId = []
      data.allTitle = []
      return data
    },
    components: {
      Toolbar
    },
    methods: {
      doFilter: function () {
        window.alert('filter!')
      },
      btnPrevious: function () {
        if (this.viewIndex !== 0) {
          this.viewIndex -= 1
        }
      },
      btnNext: function () {
        if (this.viewIndex !== 4) {
          this.viewIndex += 1
        }
      }
    },
    created () {
      //
      this.$http.get('./static/data/indusJson/tab.json', {}).then(function (res) {
        var num = 0
        var resData = res.json().data
        for (var i = 0; i < resData.length; i++) {
          this.tabList.push({'id': resData[i].order - 1, 'text': resData[i].name})
          for (var j = 0; j < resData[i].childs.length; j++) {
            for (var k = 0; k < resData[i].childs[j].childs.length; k++) {
              this.allId.push(resData[i].childs[j].childs[k].url)
              this.allTitle.push(resData[i].childs[j].childs[k].name)
              resData[i].childs[j].childs[k]['index'] = num
              num++
            }
          }
          this.contentList.push(resData[i].childs)
        }
        window.sessionStorage.setItem('tabList', JSON.stringify(this.tabList))
        window.sessionStorage.setItem('contentList', JSON.stringify(this.contentList))
      })
    },
    ready () {
      // 取到列表点击的index
      var routeIndex = this.$route.path
      var routeIndexLength = routeIndex.length
      if (routeIndex.substring(10, routeIndexLength)) {
        this.viewIndex = Number(window.sessionStorage.getItem('index'))
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btnPage{
    position: fixed;
    left:0;
    top: 50vh;
    width: 100%;
    z-index: 200;
  }

	.btn-previous{
    width: 0.4rem;
    height: 0.8rem;
    float: left;
    background: rgba(0,0,0,0.2);
	}

  .btn-next{
    width: 0.4rem;
    height: 0.8rem;
    float: right;
    background: rgba(0,0,0,0.2);
  }

  .leftButton{
    width: .4rem;
    height: 6.21vh;
    background: url('../../../../static/img/list.png') no-repeat center right;
    background-size: 3.11vh 2.17vh;
  }
</style>
